<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="床 位 查 询">
      <mt-button icon="back" @click="goBack('search')" slot="left"
        >返回</mt-button
      >
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="content">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in bedList"
          :key="index"
          :title="item.name"
          :value="'数量' + item.num"
          :label="'价格：' + item.price + '￥'"
        >
          <p>当前状态:</p>
          <span v-if="item.state=='0'">未被使用</span>
          <span v-else>已被使用</span>
          </van-collapse-item
        >
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "bedSearch",

  data() {
    return {
      activeNames: ["1"],
      bedList: [],
    };
  },

  mounted() {},

  created() {
    this.getBedMsg();
  },

  methods: {
    //返回上一页
    goBack(index) {
      this.$router.push({
        path: "./index",
        query: { index },
      });
    },
    //返回首页
    goHome() {
      this.$router.push({
        path: "../index",
      });
    },
    //获取列表数据
    getBedMsg() {
      this.$http.get("bed", {}).then((res) => {
        console.log(res);
        this.bedList = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  .title {
    span {
      display: inline-block;
      width: 50%;
      background-color: #ddd;
      text-align: center;
      color: #77c9ef;
      font-weight: 700;
      padding: 5px 0;
    }
  }
  .cInner {
    .items_S,
    .items_D {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      color: #000;
    }
    .itemsOne,
    .itemsTwo {
      padding: 3px 0;
      text-align: center;
      width: 50%;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .items_D {
      background-color: #ebebeb;
    }
  }
}
</style>